/**
 * Created by bgy on 2016/12/2.
 */
import React from 'react';
import {Link, hashHistory} from 'react-router';
import $ from '../../sources/jquery-2.2.4';

import HeaderTitle from '../../components/common/HeaderTitle';
import Global from '../../actions/Global';
import Warn from '../../components/common/Warn';

var timer;
class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      loginBtnDisabled: true,
      vcodeBtnDisabled: true,
      warnMessage: '',
      hidden: 'hidden'
    }

  }

  /*
   手机号验证
   */
  phoneNum() {
    var phoneNum = this.refs.phoneNum;
    var loginBtn = this.refs.loginBtn;
    var value = phoneNum.value;
    if (/\d{11}/.test(value) && value.length == 11) {
      this.setState({
        vcodeBtnDisabled: false
      });
    }
  }

  /*
   验证码验证
   */
  vcode() {
    var verifyCode = this.refs.verifyCode;
    var value = verifyCode.value;
    if (/\d{4}/.test(value) && value.length == 4) {
      this.setState({
        loginBtnDisabled: false
      });
    }
  }

  /**
   * 发送验证码
   */
  sendCode() {
    var btn = this.refs.sends;
    var warn = this.refs.warn;
    var loginBtn = this.refs.loginBtn;
    loginBtn.classList.remove('disabled');
    this.refs.verifyCode.value = '';
    this.setState({
      vcodeBtnDisabled: true
    });

    var phoneNum = this.refs.phoneNum.value;
    //发送验证码
    $.post({
      url: Global.host + '/account/sendMsg',
      async: false,
      data: JSON.stringify({phoneNumber: phoneNum,smsType: 2}),
      contentType: 'application/json',
      dataType: 'json',
      success: function (data) {

      }
    });
    var num = 60;
    timer = setInterval(function () {
      btn.innerText = num + 's';
      num--;
      if (num == 0) {
        clearInterval(timer);
        btn.innerText = '重新获取验证码';
        this.setState({
          vcodeBtnDisabled: false
        });
      }
    }.bind(this), 1000)
  }

  handlerLogin(event) {
    let account = this.refs.phoneNum.value;
    let verifyCode = this.refs.verifyCode.value;
    let openId = window.localStorage.getItem('openId');
    $.post({
      url: Global.host + '/account/login',
      async: false,
      data: JSON.stringify({account: account, verifyCode: verifyCode, openId: openId}),
      contentType: 'application/json',
      dataType: 'json',
      success: function (data) {
        if (data.errorCode == 0) {
          let vendorInfo = data.data.vendorInfo;
          let user = {account: data.data.account, accountType: data.data.accountType};
          window.localStorage.setItem('vendorInfo', JSON.stringify(vendorInfo));
          window.localStorage.setItem('user', JSON.stringify(user));
          const path = '/';
          hashHistory.push(path);
        } else {
          this.setState({hidden: '', warnMessage: '验证码错误！请重新获取验证码！'});
          var h = function () {
            this.setState({hidden: 'hidden'})
          }.bind(this);
          setTimeout(h, 2000);
          return;
        }
      }.bind(this),
    });
  }

  render() {
    return (
      <div className="full">
        <HeaderTitle title='登录'/>
        <div className="content">
          <div className="logo"><img src="images/main/logo@2x.png" alt=""/></div>
          <div className="form">
            <div className="form-item">
              <label htmlFor="">手机号</label><input type="text" placeholder="手机号" ref='phoneNum' onInput={this.phoneNum.bind(this)}/>
            </div>
            <div className='input-group warning hidden' ref="warn">请输入正确的手机号码格式</div>
            <div className="form-item form-item-vcode">
              <label htmlFor="">验证码</label><input type="text" placeholder="验证码" ref="verifyCode" disabled={this.state.codeInput} onInput={this.vcode.bind(this)} className="input-vcode"/>
              <button disabled={this.state.vcodeBtnDisabled} ref="sends" onClick={this.sendCode.bind(this)} className="button button-pill btn-green vcodebtn">获取验证码</button>
            </div>
            <Link to="register" className="link">新用户马上注册></Link>
            <Warn hidden={this.state.hidden} message={this.state.warnMessage}/>
            <button className="button button-pill button-primary btn-green btn-long" ref="loginBtn" onClick={this.handlerLogin.bind(this)} disabled={this.state.loginBtnDisabled}>登录</button>
          </div>
        </div>
      </div>
    )
  }
}
export default Login;
